<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜡笔小新</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <main>
        <div class="about-banner">
            <img src="images/header.jpg">
        </div>
        <nav>
            <li><a href="home.html">首页</a></li>
            <li><a href="role.html">人物介绍</a></li>
            <li><a href="collection.html">精彩合集</a></li>
            <li><a href="heji.html">主题合集</a></li>
             <li><a href="contact.html">联系我们</a></li>
            <li><a href="#">登录注册</a></li>
        </nav>
        <div class="title">
            <span>人物介绍</span>
            <hr>
        </div>
            <div class="box">
          <div class="box-img active">
            <img src="images\img1.jpg" alt="" style="width:100%;height:100%;object-fit:cover;">
          </div>
          <div class="box-img">
            <img src="images\img2.jpg" alt="" style="width:100%;height:100%;object-fit:cover;">
          </div>
          <div class="box-img">
            <img src="images\img3.jpg" alt="" style="width:100%;height:100%;object-fit:cover;">
          </div>
          <div class="box-img">
            <img src="images\img4.jpg" alt="" style="width:100%;height:100%;object-fit:cover;">
          </div>
          <div class="box-img">
            <img src="images\img5.jpg" alt="" style="width:100%;height:100%;object-fit:cover;">
          </div> 
          <div class="box-btn box-left">&lt;</div>
          <div class="box-btn box-right">&gt;</div>
          <div class="box-dots">
             <span class="dot active" data-index="1"></span>
             <span class="dot active" data-index="1"></span>
             <span class="dot active" data-index="1"></span>
             <span class="dot active" data-index="1"></span>
             <span class="dot active" data-index="1"></span>
          </div>
        </div>  
        <div class="persons">
        <div class="person">
            <div class="person-image">
                <img src="images\xiaoxin.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="xiaoxin-text">
                野原新之助
            </div>
            <div class="xiaoxin-p">性格率真，做事无厘头，表面调皮，试着成熟情商高，技能点超多，尤其屁股见光喜欢小饼干动感超人 大姐姐讨厌青椒 马铃薯头cosplay</div>
        </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\xiaokui.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="xiaokui-text">
                野原向日葵
            </div>
            <div class="xiaoxin-p">野原家的团宠，备受疼爱，早熟爱幻想、调皮捣蛋长相可爱，非常招人喜欢，拥有超出婴儿的力量和智慧喜欢珠宝和帅哥，能辨真假</div>
        </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\guangzhi.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="guangzhi-text">
                野原广志
            </div>
            <div class="guangzhi-p">靠谱爱家人的爸爸和丈夫，好色脚臭 人妖杀手，在双叶商事上班，万年股长 爱好：高尔夫 啤酒 32年房贷月薪30万日元</div>
        </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\meiya.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="meiya-text">
                野原美伢
            </div>
            <div class="xiaoxin-p">用心照顾一家人的好妈妈 内心温柔，爱美有少女心 小气、性急、三分钟热度 爱好：特卖会 减肥 聊八卦 特技：愤怒铁拳 太阳穴转转功</div>
        </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\xiaobai.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="xiaobai-text">
                野原小白
            </div>
            <div class="xiaobai-p">非常忠诚，很聪明通人性 会买菜 收拾玩具 照顾小葵 春日部交际犬，狗面很广 技能：棉花糖 抓痒痒 开车 品种：米克斯犬</div>
        </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\fengjian.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="fengjian-text">
               风间彻
            </div>
            <div class="fengjian-p">春日部卷王，品学兼优 傲娇属性拉满，爱面子 表面嫌弃实则很重视友情 耳朵很敏感，异性缘很好 喜欢：可爱p （不愿意承认）</div>
        </div>
        </div>
        <div class="person">
           <div class="person-image">
                <img src="images\adai.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="adai-text">
                阿呆
            </div>
            <div class="adai-p">沉默寡言 善良可爱 心思细腻 鼻涕是本体，拥有很多技能 喜欢收集各种各样的石头 有哲学家气质，能理解小新 不鸣则已一鸣惊人</div>
        </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\nini.jpg" alt="">
            </div>
            <div class="person-info">
            <div class="nini-text">
                樱田妮妮
            </div>
            <div class="nini-p">防卫队大姐大，正义感强 脾气暴躁 没耐心 霸道强势 武器：挨揍兔（幸福兔） 喜欢：超真实扮家家酒 口头禅：这不是平时的妈妈</div>
           </div>
        </div>
        <div class="person">
            <div class="person-image">
                <img src="images\zhengnan.jpg" alt="">
            </div>
            <div class="person-info">
              <div class="zhengnan-text">
                佐藤正男
              </div>
              <div class="zhengnan-p">胆小爱哭 善良 喜欢小爱，梦想：漫画家 容易得瑟，偶尔真男人 御饭团 最真实的小孩</div>
           </div>
        </div>
        <script src="JS/javascript.js"></script>
    </div>
        <footer>蜡笔小新粉丝集聚地</footer>
    </main>
</body>
</html>